<template>
  <div class="box">
    <h1>父组件</h1>
    <v-child
      msg="今天不准吃饭"
      data="明天要写作业"
      @toParent="toParent"
      ref="box"
    ></v-child>
  </div>
</template>
  
  <!-- 在script标签里面，添加一个setup属性，那么整个 script 就直接会变成 setup 函数
    1.组件只需要引入就可以直接使用，不需要注册
  -->
  <script setup>
import vChild from "./child.vue";
import { onMounted, ref } from "vue";

//子传父
function toParent(msg) {
  console.log(msg);
}

//1.定义一个ref对象
let box = ref(null);

//2.挂载完成后就可以通过box获取到dom节点
onMounted(() => {
  console.log(box.value); //获取到子组件实例
  box.value.lookup();  
  console.log(box.value.name); // 赵嘉伟
});
</script>
  
  <style scoped>
</style>